<template>
    <section>
        <!--搜索工具条-->
        <el-col :span="24" class="mt30" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filtersRenYuan" ref="filtersRenYuan">
                <div class="col-title">专兼职管理人员统计</div>
                <el-form-item prop="belong">
                    <el-select
                            placeholder="高校所属" v-model="filtersRenYuan.belong" size="12px" clearable>
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_department"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="arts_type">
                    <el-select
                            placeholder="高校类型" v-model="filtersRenYuan.arts_type" size="12px" clearable>
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_pro"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="provinces">
                    <el-select
                            placeholder="地域" v-model="filtersRenYuan.provinces" size="18px" clearable>
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in dict.provinces"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getFullOrPart">搜索</el-button>
                    <el-button @click="reset('filtersRenYuan')">重置</el-button>
                    <el-button>导出Excel</el-button>

                </el-form-item>
            </el-form>
        </el-col>
        <!--搜索结果表格-->
        <el-table
                :data="tableRenYuanShowData"
                stripe
                ref="ren-yuan-table"
                v-loading="listRenYuanLoading"
                style="width: 100%;"
                @sort-change="(val)=>tabSort(val, 'tableRenYuan')"
        >
            <el-table-column
                    label="高校名称"
                    prop="unit_Name"/>
            <el-table-column
                    align="center"
                    label="总计人数"
                    sortable="custom"
                    prop="total"/>
            <el-table-column
                    align="center"
                    label="校级专职"
                    sortable="custom"
                    prop="school_full_time"/>
            <el-table-column
                    align="center"
                    label="校级专职占比"
                    sortable="custom"
                    :formatter="columnArte"
                    prop="school_full_time_rate"/>
            <el-table-column
                    align="center"
                    label="校级兼职"
                    sortable="custom"
                    prop="school_part_time"/>
            <el-table-column
                    align="center"
                    label="校级兼职占比"
                    sortable="custom"
                    :formatter="columnArte"
                    prop="school_part_time_rate"/>
            <el-table-column
                    align="center"
                    label="院系专职"
                    sortable="custom"
                    prop="college_full_time"/>
            <el-table-column
                    align="center"
                    label="院系专职占比"
                    sortable="custom"
                    :formatter="columnArte"
                    prop="college_full_time_rate"/>
            <el-table-column
                    align="center"
                    label="院系兼职"
                    sortable="custom"
                    prop="college_part_time"/>
            <el-table-column
                    align="center"
                    label="院系兼职占比"
                    sortable="custom"
                    :formatter="columnArte"
                    prop="college_part_time_rate"/>
            <el-table-column
                    align="center"
                    label="操作" >
                <template slot-scope="scope">
                    <el-button type="text" @click="viewDetail(scope.row)">
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    style="text-align: center;"
                    @ @size-change="(val)=>handleSizeChange(val, 'tableRenYuan')"
                    @current-change="(val)=>handleCurrentChange(val, 'tableRenYuan')"
                    :page-size="pagertableRenYuan.page_size"
                    :page-sizes="pagertableRenYuan.sizes"
                    background
                    :current-page="pagertableRenYuan.page_current"
                    layout="prev,pager,next,sizes,total"
                    :total="pagertableRenYuan.total">
            </el-pagination>
        </el-col>
        <!--搜索工具条-->
        <el-col :span="24" class="mt30" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filtersJingFei" ref="filtersJingFei">
                <div class="col-title">经费投入概况</div>
                <el-form-item prop="belong">
                    <el-select
                            placeholder="高校所属" v-model="filtersJingFei.belong" size="12px">
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_department"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="arts_type">
                    <el-select
                            placeholder="高校类型" v-model="filtersJingFei.arts_type" size="12px">
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_pro"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="provinces">
                    <el-select
                            placeholder="地域" v-model="filtersJingFei.provinces" size="18px">
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in dict.provinces"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getEconomics">搜索</el-button>
                    <el-button @click="reset('filtersJingFei')">重置</el-button>
                    <el-button  >导出Excel</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-col :span="24" >
            <el-col :span="6" >
                <div class="corrected-total yiwancheng">
                    <p>
                        平均常规预算 <br>
                        <span>{{jingFeiPingJun}}</span>万/年
                    </p>
                </div>
            </el-col>
            <el-col :span="6" >
                <div class="corrected-total yiwancheng">
                    <p>
                        总常规预算 <br>
                        <span>{{jingFeiZong}}</span>万/年
                    </p>
                </div>
            </el-col>
            <el-col :span="6" >
                <div class="corrected-total yiwancheng">
                    <p>
                        平均三年安全专项投入合计 <br>
                        <span>{{jingFeiSanNianPingJun}}</span>万/年
                    </p>
                </div>
            </el-col>
            <el-col :span="6" >
                <div class="corrected-total yiwancheng">
                    <p>
                        总三年安全专项投入合计 <br>
                        <span>{{jingFeiSanNianZong}}</span>万/年
                    </p>
                </div>
            </el-col>
        </el-col>
        <el-col :span="24" >
            <el-table
                    :data="tableJingFeiShowData"
                    stripe
                    v-loading="listJingFeiLoading"
                    style="width: 100%;"
                    @sort-change="(val)=>tabSort(val, 'tableJingFei')"
            >
                <el-table-column
                        label="高校名称"
                        prop="unit_Name"/>
                <el-table-column
                        align="center"
                        label="常规预算（万/年）"
                        sortable
                        prop="organization_param9"/>
                <el-table-column
                        align="center"
                        label="近三年安全专项投入合计（不包含常规经费，万/年）"
                        sortable
                        :formatter="columnisNull"
                        prop="organization_param10"/>
            </el-table>
            <!--分页-->
            <el-col :span="24" class="toolbar">
                <el-pagination
                        style="text-align: center;"
                        @size-change="(val)=>handleSizeChange(val, 'tableJingFei')"
                        @current-change="(val)=>handleCurrentChange(val, 'tableJingFei')"
                        :page-size="pagertableJingFei.page_size"
                        :page-sizes="pagertableJingFei.sizes"
                        background
                        :current-page="pagertableJingFei.page_current"
                        layout="prev,pager,next,sizes,total"
                        :total="pagertableJingFei.total">
                </el-pagination>
            </el-col>
        </el-col>
        <!--搜索工具条-->
        <el-col :span="24" class="mt30" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filtersSheShi" ref="filtersSheShi">
                <div class="col-title">基础设施统计</div>
                <el-form-item prop="belong">
                    <el-select
                            placeholder="高校所属" v-model="filtersSheShi.belong" size="12px">
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_department"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="arts_type">
                    <el-select
                            placeholder="高校类型" v-model="filtersSheShi.arts_type" size="12px">
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_pro"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="provinces">
                    <el-select
                            placeholder="地域" v-model="filtersSheShi.provinces" size="18px">
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in dict.provinces"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getBaseBuild">搜索</el-button>
                    <el-button @click="reset('filtersSheShi')">重置</el-button>
                    <el-button  >导出Excel</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--搜索结果表格-->
        <el-table
                :data="tableSheShiShowData"
                stripe
                v-loading="listSheShiLoading"
                style="width: 100%;"
        >
            <el-table-column
                    label="高校名称"
                    prop="unit_Name"/>
            <el-table-column
                    align="center"
                    label="有无危险品仓库"
                    prop="facilities_param1"/>
            <el-table-column
                    align="center"
                    label="有无危废中转站"
                    prop="facilities_param3"/>
            <el-table-column
                    align="center"
                    label="是否有危险品全过程管理信息系统（包含采购、运输、储存、使用、转移、处置等流程）"
                    prop="facilities_param5"/>
            <el-table-column
                    align="center"
                    label="有无其他实验室安全管理信息系统"
                    prop="facilities_param7"/>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    style="text-align: center;"
                    @size-change="(val)=>handleSizeChange(val, 'tableSheShi')"
                    @current-change="(val)=>handleCurrentChange(val, 'tableSheShi')"
                    :page-size="pagertableSheShi.page_size"
                    :page-sizes="pagertableSheShi.sizes"
                    background
                    :current-page="pagertableSheShi.page_current"
                    layout="prev,pager,next,sizes,total"
                    :total="pagertableSheShi.total">
            </el-pagination>
        </el-col>

        <!--饼图详情-->
        <el-dialog
          title="详情"
          :visible.sync="echartsDialogVisible"
          width="30%">
            <bar-chart
                :chart-data="pieChartData"
                :chart-count="pieChartCount"
            />
        </el-dialog>
    </section>
</template>

<script>

    import BarChart from './componets/divisionPieChart'

    import { fullOrPart , economics, baseBuild, exportCompareInspectItemExcel } from '../../api/statistics_api'
    import {get_file} from "../../api/common";
    import { saveAs } from 'file-saver';
    import dict from '../../common/js/dict';
    export default {
        name:'statisticsSafeInfo',
        components:{
            BarChart
        },
        data() {
            return {
                echartsDialogVisible: false,
                charts: '',
                opinion:['执行总额','已经执行'],
                type: 'pie',
                opinionData:[
                     {value:400, name:'执行总额'},
                     {value:600, name:'已经执行'},
                ],

                dict:dict,
                //表单header样式
                headerRowStyle: {
                    backgroundColor: "#ddd",
                    color: "#333",
                    textAlign: "center",
                },
                listRenYuanLoading: false,
                listJingFeiLoading: false,
                listSheShiLoading: false,
                jingFeiPingJun: 0,
                jingFeiZong: 0,
                jingFeiSanNianPingJun: 0,
                jingFeiSanNianZong: 0,
                //表格数据
                tableRenYuanData: [],
                tableJingFeiData: [],
                tableSheShiData: [],
                tableRenYuanShowData: [],
                tableJingFeiShowData: [],
                tableSheShiShowData: [],
                filtersRenYuan: {
                    belong:'',
                    arts_type:'',
                    provinces:''
                },
                filtersJingFei: {
                    belong:'',
                    arts_type:'',
                    provinces:''
                },
                filtersSheShi: {
                    belong:'',
                    arts_type:'',
                    provinces:''
                },
                //分页设置
                pagertableRenYuan: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_current: 1
                },
                pagertableJingFei: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_current: 1
                },
                pagertableSheShi: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_current: 1
                },
                //详情饼图数据
                pieChartData: [],
                pieChartCount: 0,
            }
        },
        methods: {
            download(url,fileName){


            },

            columnArte(row, column, cellValue, index){
                return cellValue + '%'
            },
            columnisNull(row, column, cellValue, index){
                if(!cellValue) return 0
            },
            //分页page_size发生改变
            handleSizeChange(val,name) {
                this['pager' + name].page_current = 1;
                this['pager' + name].page_size = val;
                this.setPages(name)
            },
            //分页page_current发生改变
            handleCurrentChange(val,name) {
                this['pager' + name].page_current = val;
                this.setPages(name)
            },
            reset(name){
                this.$refs[name].resetFields();
                if(name == 'filtersRenYuan') this.getFullOrPart()
                if(name == 'filtersJingFei') this.getEconomics()
                if(name == 'filtersSheShi') this.getBaseBuild()
            },
            compare(attr,rev){
                if(rev == null)
                    rev = 1
                else
                    rev = (rev) ? 1 : -1
                return (a,b) => {
                    a = a[attr]
                    b = b[attr]

                    if(Number(a) < Number(b)){
                        return rev * -1
                    }
                    if(Number(a) > Number(b)){
                        return rev * 1
                    }
                    return 0
                }
            },
            setPages(key){
                let tempData = JSON.parse(JSON.stringify(this[key+'Data']))
                let start = 0, end = 0
                end = this['pager' + key].page_current *  this['pager' + key].page_size
                start = end - this['pager' + key].page_size
                this[key+'ShowData'] = tempData.slice(start, end)
            },
            tabSort(column,key){
                let tempData = JSON.parse(JSON.stringify(this[key+'Data']))
                let rev = column.order == 'ascending' ? true : false
                tempData.sort(this.compare(column.prop,rev))
                this[key+'Data'] = tempData
                this.setPages(key)
            },

            getFullOrPart(){
                this.listRenYuanLoading = true;
                fullOrPart(this.filtersRenYuan).then(res => {
                    if(res.data.status == 200){
                        let tempData =JSON.parse(res.data.datas)
                        this.pagertableRenYuan.total = tempData.length
                        tempData.map(item => {
                            for(let i in item){
                                if(typeof item[i] == 'string') item[i] = item[i].replace('%', '')
                            }
                        })
                        this.tableRenYuanData = tempData

                        tempData = JSON.parse(JSON.stringify(this['tableRenYuan'+'Data']))
                        this['tableRenYuan'+'Data'] = tempData
                        this.setPages('tableRenYuan')

                        //this.tabSort({prop:'total', order:'ascending'},'tableRenYuan')
                    }
                    this.listRenYuanLoading = false;
                })
            },
            getEconomics(){
                this.listJingFeiLoading = true;
                economics(this.filtersJingFei).then(res => {
                    if(res.data.status == 200){
                        let tempData =JSON.parse(res.data.datas)
                        this.jingFeiPingJun = tempData.avg_organization_param9
                        this.jingFeiZong = tempData.avg_organization_param10
                        this.jingFeiSanNianPingJun = tempData.total_organization_param9
                        this.jingFeiSanNianZong = tempData.total_organization_param10
                        this.pagertableJingFei.total = tempData.colleges.length
                        this.tableJingFeiData = tempData.colleges
                        this.tabSort({prop:'total', order:'organization_param9'},'tableJingFei')
                    }
                    this.listJingFeiLoading = false;
                })
            },
            getBaseBuild(){
                this.listSheShiLoading = true;
                baseBuild(this.filtersSheShi).then(res => {
                    if(res.data.status == 200){
                        let tempData =JSON.parse(res.data.datas)
                        this.pagertableSheShi.total = tempData.length
                        this.tableSheShiData = tempData
                        this.setPages('tableSheShi')
                    }
                    this.listSheShiLoading = false;
                })
            },
            //初始化页面
            initData() {
                this.getFullOrPart();
                this.getEconomics();
                this.getBaseBuild();
            },
            //详情查看并图
            viewDetail(row){
                 this.echartsDialogVisible = true;
                 
                this.$nextTick(function () {
                    this.pieChartData = [{id:row.unit_id, name:"校级专职", value:row.school_full_time},
                    {id:row.unit_id, name:"校级兼职", value:row.school_part_time},
                    {id:row.unit_id, name:"院系专职", value:row.college_full_time},
                    {id:row.unit_id, name:"院系兼职", value:row.college_part_time}];

                     this.pieChartCount = row.total;
                     console.log(this.pieChartData, this.pieChartCount)
                })
            },
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>
<style scoped lang="scss">
.mt30{
    margin-top:30px;
}
.col-title{
    display:inline-table;
    font-weight:600;
    font-size:16px;
    color:#333;
    padding:0 30px 0 15px;
}
    .corrected-total{
        height:180px;
        border-radius: 8px;
        margin:20px;
        font-size:20px;
        color:#fff;
        padding-left:60px;
        -webkit-box-shadow: 3px 5px 15px 0 #d6ddf4;
        box-shadow: 3px 5px 15px 0 #d6ddf4;
        background-size: 115px;
        >p{
            padding-top:40px;
            line-height: 40px;
        }
        &.yiwancheng{
            background:#6a91ec url('../../assets/images/img_yiwancheng.png') center right no-repeat;
            background-size: 115px;
        }
        &.weiwancheng{
            background:#6a91ec url('../../assets/images/img_weiwancheng.png') center right no-repeat;
            background-size: 115px;
        }
        &.wanchengbili{
            background:#6a91ec url('../../assets/images/img_zhenggailv.png') center right no-repeat;
            background-size: 115px;
        }
        span{
            font-size:50px;
        }
    }
</style>
